import { Recordable } from '@/global'
import { VNode } from 'vue'

export interface ColumnProps {
  // 对应列的类型
  type?: 'selection' | 'index' | 'expand'
  // 显示的标题
  label: string
  // 对应列内容的字段名
  prop: string
  // 对应列的宽度
  width?: string
  // 对应列的最小宽度
  minWidth?: string
  // 列是否固定在左侧或者右侧，true 表示固定在左侧
  fixed?: true | 'left' | 'right'
  // 列标题 Label 区域渲染
  renderHeader?: (column: ColumnProps, $index: number) => VNode | VNode[] | string
  // 对应列是否可以排序
  sortable?: true | false | 'custom'
  // 当内容过长被隐藏时显示 tooltip
  showOverflowTooltip?: boolean
  // 对齐方式
  align?: 'left' | 'center' | 'right'
  // 表头对齐方式
  headerAlign?: 'left' | 'center' | 'right'
  // 列的 className
  className?: string
  // 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
  selectable?: (row: Recordable, index: number) => boolean
  // 插槽名称
  slot?: string
  // 渲染函数
  render?: (data: Recordable, index: number) => VNode | VNode[] | string
}
